<script>
  export default {
    name: 'claim-store-dialog',
    data() {
      return {
        // 弹出框显示状态[true-显示 false-隐藏]
        visible: false,
        // 商店列表
        storeList: [],
        // 商店总数
        totalNum: 0,
        // 商店检索表单对象
        searchForm: {
          // 商店名称
          word: '',
          // 商店所属用户主键
          storeUserId: undefined,
          // 状态
          status: undefined,
          // 当前展示页码
          page: 1,
          // 当前页显示个数
          limit: 10
        },
        // 商店所属用户列表
        userList: [],
        // 状态枚举列表
        statusEnumList: [],
        // 数据加载状态[false-不加载 true-加载]
        dataLoad: false,
        // 按钮禁用状态[true-禁用 false-可用]
        buttonLoad: false,
        // 认领状态[true-有认领 false-没有认领]
        claimStatus: false
      }
    },
    computed: {

    },
    filters: {
      /**
       * 商店状态名称映射
       * @param {number} value          商店状态值
       * @param {Array}  statusEnumList 商店状态枚举列表
       */
      statusFormat(value, statusEnumList) {
        for (let statusEnum of statusEnumList) {
          if (statusEnum.value === value) {
            return statusEnum.name;
          }
        }
        return '';
      }
    },
    methods: {
      /**
       * 初始化商店认领弹出框
       * @param {Array} statusEnumList 商店状态枚举列表
       */
      initDialog(statusEnumList) {
        // 打开弹出框
        this.visible = true;
        this.statusEnumList = statusEnumList;

        // 加载数据
        this.getNotAssignStoreUserList();
        this.getNotAssignStorePageList();
      },
      /**
       * 商店搜索事件
       */
      searchHandle() {
        this.searchForm.page = 1;
        // 加载数据
        this.getNotAssignStorePageList();
      },
      /**
       * 获取所有未分单商店所属用户方法
       */
      getNotAssignStoreUserList() {
        this.$axios.$get('/assign-store/not-assign/user/list')
          .then(({ data }) => {
            this.userList = data;
          })
          .catch(() => {});
      },
      /**
       * 分页获取未分单商店方法
       */
      getNotAssignStorePageList() {
        this.dataLoad = true;
        this.$axios.$post('/assign-store/not-assign/page/list', this.searchForm)
          .then(({ data }) => {
            this.storeList = data.data;
            this.totalNum = data.totalNum;
          })
          .catch(() => {})
          .finally(() => {
            this.dataLoad = false;
          });
      },
      /**
       * 商店认领事件
       * @param {Object} store 商店对象
       */
      claimStoreHandle(store) {
        this.$confirm(`您确定要领取【${store.name}】商店吗？`, '操作提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        })
        .then(() => {
          let body = {
            storeVoList: [ { id: store.id, storeId: store.storeId, submitType: store.submitType } ]
          }
          return this.$axios.$post('/assign-store/claim', body);
        })
        .then(({ data }) => {
          if (data) {
            this.notify('warning', '提示', data);
          } else {
            this.claimStatus = true;

            this.notify('success', '提示', '商店认领操作成功');
          }
          // 刷新列表
          this.getNotAssignStorePageList();
        })
        .catch(err => {
          if (err.code === 409) {
            // 重新加载列表
            this.getNotAssignStorePageList();
          }
        })
        .finally(() => {
          // 按钮恢复可用
          this.buttonLoad = false;
        });
      },
      /**
       * '点击特定页码'、'上一页'、'下一页'操作事件
       * @param {number} index 最新页码
       */
      currentChangeHandle(index) {
        let searchForm = this.searchForm;
        if (searchForm.page === index) {
          return;
        }
        searchForm.page = index;
        this.getNotAssignStorePageList();
      },
      /**
       * 重置检索表单事件
       */
      resetFormHandle() {
        // 重置表单
        this.$refs.searchForm.resetFields();

        this.searchForm.page = 1;
      },
      /**
       * 关闭弹出框事件
       */
      closeDialogHandle() {
        this.storeList = [];
        this.totalNum = 0;
        // 重置检索表单
        this.$refs.searchForm.resetFields();
        this.userList = [];
        this.statusEnumList = [];

        if (this.claimStatus) {
          // 向上传递事件
          this.$emit('refresh-table')
        }
        this.claimStatus = false;

        this.$nextTick(() => {
          // 关闭弹出框
          this.visible = false;
        });
      }
    }
  }
</script>

<template>
  <el-dialog
    title="商店审核认领"
    :visible.sync="visible"
    width="60%"
    top="10vh"
    :before-close="closeDialogHandle"
    :close-on-click-modal="false"
    class="claim-store-dialog"
  >
    <el-form inline size="mini" :model="searchForm" ref="searchForm" @keyup.enter.native="searchHandle">
      <el-form-item prop="word" label="商店检索">
        <el-input v-model="searchForm.word" maxlength="30" clearable placeholder="请输入商店名称"></el-input>
      </el-form-item>
      <el-form-item prop="storeUserId">
        <el-select v-model="searchForm.storeUserId" clearable placeholder="请选择商店所属用户">
          <el-option v-for="user in userList" :key="'user' + user.value"
                     :label="user.name" :value="user.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="status">
        <el-select v-model="searchForm.status" clearable placeholder="请选择状态">
          <el-option v-for="statusEnum in statusEnumList" :key="'status' + statusEnum.value"
                     :label="statusEnum.name" :value="statusEnum.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button :disabled="dataLoad" @click="searchHandle" type="primary" icon="el-icon-search">查询</el-button>
        <el-button :disabled="dataLoad" @click="resetFormHandle" plain icon="el-icon-refresh-right">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="dataLoad"
      element-loading-text="商店列表加载中..."
      element-loading-spinner="el-icon-loading"
      :data="storeList"
      ref="storeTable"
    >
      <el-table-column prop="name" header-align="center" align="center" label="商店名称"></el-table-column>
      <el-table-column prop="userName" header-align="center" align="center" label="所属用户"></el-table-column>
      <el-table-column prop="statusName" header-align="center" align="center" label="状态"></el-table-column>
      <el-table-column prop="submitTypeName" header-align="center" align="center" label="提交类型"></el-table-column>
      <el-table-column prop="submitCount" header-align="center" align="center" label="提交次数"></el-table-column>
      <el-table-column prop="submitTime" header-align="center" align="center" label="提交时间" width="133"></el-table-column>
      <el-table-column
        header-align="left"
        width="100"
        label="操作">
        <template v-slot="{ row }">
          <el-button type="text" :disabled="buttonLoad" icon="el-icon-thumb" @click="claimStoreHandle(row)">
            领取
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="currentChangeHandle"
      :disabled="dataLoad"
      :current-page="searchForm.page"
      :page-size="searchForm.limit"
      :total="totalNum"
      layout="total, prev, pager, next, jumper"
      class="paging">
    </el-pagination>
  </el-dialog>
</template>

<style scoped>
  .claim-store-dialog >>> .el-dialog__body {
    padding: 20px;
  }
  .claim-store-dialog .paging {
    text-align: right;
    margin: 7px;
  }
</style>
